<template>
    <div class="purchase-plan-page">
        <el-card>
            <div class="header-bar">
                <span class="title">采购计划与跟踪</span>
                <el-input v-model="search.keyword" placeholder="计划单号/产品/负责人" size="small"
                    style="width:200px;margin-right:10px;" clearable />
                <el-select v-model="search.status" placeholder="状态" size="small" style="width:120px;margin-right:10px;"
                    clearable>
                    <el-option v-for="s in statusOptions" :key="s.value" :value="s.value" :label="s.label" />
                </el-select>
                <el-button type="primary" size="small" @click="onAdd">新增计划单</el-button>
            </div>
            <el-table :data="filteredList" border style="width:100%;margin-top:8px;">
                <el-table-column prop="planCode" label="计划单号" width="130" />
                <el-table-column prop="product" label="产品" min-width="120" />
                <el-table-column prop="quantity" label="计划数量" width="90" />
                <el-table-column prop="planDate" label="计划日期" width="110" />
                <el-table-column prop="responsible" label="负责人" min-width="100" />
                <el-table-column prop="status" label="状态" width="110">
                    <template #default="{ row }">
                        <el-tag
                            :type="row.status === '已完成' ? 'success' : (row.status === '进行中' ? 'info' : (row.status === '预警' ? 'warning' : 'default'))"
                            size="small">{{ row.status }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="progress" label="进度" width="130" align="center">
                    <template #default="{ row }">
                        <el-progress :percentage="row.progress"
                            :status="row.progress === 100 ? 'success' : row.status === '预警' ? 'exception' : 'normal'" type="circle"
                            :width="44" />
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" min-width="120" />
                <el-table-column label="操作" width="190" fixed="right">
                    <template #default="{ row }">
                        <el-button size="small" type="info" link @click="onEdit(row)">编辑</el-button>
                        <el-button size="small" type="danger" link @click="onDelete(row)">删除</el-button>
                        <el-button size="small" type="primary" link v-if="row.status !== '已完成'"
                            @click="onStep(row)">推进进度</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 新增/编辑弹窗 -->
        <el-dialog v-model="editDialog.visible" :title="editDialog.isEdit ? '编辑采购计划' : '新增采购计划'" width="440px">
            <el-form :model="editDialog.form" label-width="90px">
                <el-form-item label="计划单号">
                    <el-input v-model="editDialog.form.planCode" />
                </el-form-item>
                <el-form-item label="产品">
                    <el-input v-model="editDialog.form.product" />
                </el-form-item>
                <el-form-item label="计划数量">
                    <el-input-number v-model="editDialog.form.quantity" :min="1" />
                </el-form-item>
                <el-form-item label="计划日期">
                    <el-date-picker v-model="editDialog.form.planDate" type="date" value-format="YYYY-MM-DD"
                        style="width: 100%;" />
                </el-form-item>
                <el-form-item label="负责人">
                    <el-input v-model="editDialog.form.responsible" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="editDialog.form.status">
                        <el-option v-for="s in statusOptions" :key="s.value" :value="s.value" :label="s.label" />
                    </el-select>
                </el-form-item>
                <el-form-item label="进度">
                    <el-slider v-model="editDialog.form.progress" :min="0" :max="100" show-input style="width: 80%;" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="editDialog.form.remark" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="editDialog.visible = false">取消</el-button>
                <el-button type="primary" @click="onSaveEdit">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const statusOptions = [
    { label: '进行中', value: '进行中' },
    { label: '已完成', value: '已完成' },
    { label: '预警', value: '预警' }
]

const search = reactive({ keyword: '', status: '' })

// 15条医药行业采购计划模拟数据
const planList = ref([
    { planCode: 'PLAN20240601', product: '阿莫西林原料', quantity: 1000, planDate: '2024-06-01', responsible: '王小明', status: '进行中', progress: 60, remark: '等待供应商发货' },
    { planCode: 'PLAN20240602', product: '氯化钠注射液', quantity: 800, planDate: '2024-06-02', responsible: '李红', status: '已完成', progress: 100, remark: '已全部到货' },
    { planCode: 'PLAN20240603', product: '青霉素钠', quantity: 1200, planDate: '2024-06-03', responsible: '赵雷', status: '进行中', progress: 20, remark: '刚创建' },
    { planCode: 'PLAN20240604', product: '维生素C', quantity: 500, planDate: '2024-06-04', responsible: '孙静', status: '预警', progress: 40, remark: '供货延迟' },
    { planCode: 'PLAN20240605', product: '地塞米松', quantity: 200, planDate: '2024-06-05', responsible: '陈波', status: '进行中', progress: 50, remark: '' },
    { planCode: 'PLAN20240606', product: '甲硝唑注射液', quantity: 900, planDate: '2024-06-05', responsible: '王小明', status: '已完成', progress: 100, remark: '' },
    { planCode: 'PLAN20240607', product: '葡萄糖注射液', quantity: 750, planDate: '2024-06-06', responsible: '李红', status: '进行中', progress: 30, remark: '' },
    { planCode: 'PLAN20240608', product: '头孢曲松钠', quantity: 680, planDate: '2024-06-07', responsible: '赵雷', status: '已完成', progress: 100, remark: '' },
    { planCode: 'PLAN20240609', product: '左氧氟沙星', quantity: 530, planDate: '2024-06-08', responsible: '孙静', status: '预警', progress: 60, remark: '供应商变更' },
    { planCode: 'PLAN20240610', product: '环磷酰胺', quantity: 300, planDate: '2024-06-09', responsible: '陈波', status: '进行中', progress: 10, remark: '' },
    { planCode: 'PLAN20240611', product: '氨苄西林', quantity: 780, planDate: '2024-06-09', responsible: '王小明', status: '进行中', progress: 65, remark: '' },
    { planCode: 'PLAN20240612', product: '硫酸庆大霉素', quantity: 650, planDate: '2024-06-10', responsible: '李红', status: '预警', progress: 45, remark: '未到货' },
    { planCode: 'PLAN20240613', product: '甲氨蝶呤', quantity: 450, planDate: '2024-06-11', responsible: '赵雷', status: '进行中', progress: 80, remark: '' },
    { planCode: 'PLAN20240614', product: '盐酸多巴胺', quantity: 390, planDate: '2024-06-12', responsible: '孙静', status: '已完成', progress: 100, remark: '' },
    { planCode: 'PLAN20240615', product: '阿奇霉素', quantity: 990, planDate: '2024-06-13', responsible: '陈波', status: '进行中', progress: 35, remark: '' },
])

const filteredList = computed(() => {
    return planList.value.filter(p =>
        (!search.status || p.status === search.status) &&
        (!search.keyword ||
            p.planCode.includes(search.keyword) ||
            p.product.includes(search.keyword) ||
            p.responsible.includes(search.keyword) ||
            (p.remark && p.remark.includes(search.keyword))
        )
    )
})

// 弹窗
const editDialog = reactive({
    visible: false,
    isEdit: false,
    form: { planCode: '', product: '', quantity: 1, planDate: '', responsible: '', status: '进行中', progress: 0, remark: '' }
})

function onAdd() {
    Object.assign(editDialog.form, { planCode: '', product: '', quantity: 1, planDate: '', responsible: '', status: '进行中', progress: 0, remark: '' })
    editDialog.isEdit = false
    editDialog.visible = true
}
function onEdit(row) {
    Object.assign(editDialog.form, { ...row })
    editDialog.isEdit = true
    editDialog.visible = true
}
function onSaveEdit() {
    if (!editDialog.form.planCode || !editDialog.form.product || !editDialog.form.responsible) {
        ElMessage.warning('请填写完整信息')
        return
    }
    if (editDialog.isEdit) {
        const idx = planList.value.findIndex(v => v.planCode === editDialog.form.planCode)
        if (idx !== -1) Object.assign(planList.value[idx], editDialog.form)
    } else {
        if (planList.value.some(v => v.planCode === editDialog.form.planCode)) {
            ElMessage.warning('计划单号重复')
            return
        }
        planList.value.push({ ...editDialog.form })
    }
    editDialog.visible = false
}
function onDelete(row) {
    const idx = planList.value.findIndex(v => v.planCode === row.planCode)
    if (idx !== -1) planList.value.splice(idx, 1)
}
function onStep(row) {
    // 推进进度（模拟每次+20%，满100自动完成）
    if (row.progress < 100) {
        row.progress = Math.min(row.progress + 20, 100)
        if (row.progress === 100) {
            row.status = '已完成'
            ElMessage.success('计划已完成')
        } else if (row.status !== '预警') {
            row.status = '进行中'
            ElMessage.success('进度推进')
        }
    }
}
</script>

<style scoped>
.purchase-plan-page {
    padding: 28px 38px 30px 38px;
    min-height: 100vh;
    background: #fff;
}

.header-bar {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    gap: 10px;
}

.header-bar .title {
    font-size: 1.18rem;
    font-weight: 600;
    margin-right: 28px;
}
</style>
